/* 单个委托的View
 * @Author: Joursion
 * @Date: 2018-07-17 11:55:21
 * @Last Modified by: Joursion
 * @Last Modified time: 2018-09-04 17:20:30
 */

import React, { Component } from 'react';
import { View, Text, Alert } from 'react-native';
import { scaleSize, scaleFontSize } from '../util/size';
import { IEntrustItem } from '../interface';
import { Global } from '../util/constants';

interface IProps extends IEntrustItem {
    cancelOrder: Function,
}

export default class EntrustItem extends Component<IProps, any>{
    constructor(props) {
        super(props);
    }

    cancelOrder = (orderId: string) => {
        Alert.alert('确认撤单', '', [
            {text: '确认', onPress: () => this.props.cancelOrder(orderId)},
            {text: '取消', onPress: () => {} }
        ])
    }

    render() {
        const { dt, type, price, noFilled, amount , coinType, current = 'now',  orderId, state} = this.props;
        const time = new Date(dt);
        const timeStr = `${time.toTimeString().split(' ')[0]}  ${time.toLocaleDateString()}`;

        let typeText = '买入';
        let _coinType = coinType.split('/')[0];   // coinType = 'ETH/BTC';
        let textStyleColor = Global.buyColor;

        if (type === 'sell') {
            typeText = '卖出';
            _coinType = coinType.split('/')[1];
            textStyleColor = Global.sellColor;;
        }
        
        return (
            <View style={{
                height: scaleSize(100),
                paddingLeft: scaleSize(20),
                paddingTop: scaleSize(15),
                paddingRight: scaleSize(20),
                paddingBottom: scaleSize(17),
                borderBottomColor: '#F2F2F2',
                borderBottomWidth: 1
            }}>
                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                    <Text style={{
                        fontFamily: 'Helvetica',
                        fontSize: scaleFontSize(14),
                        color: '#9B9B9B',
                        lineHeight: scaleSize(17)
                    }}>
                        {timeStr}
                    </Text>

                    <Text 
                        onPress={() => {
                            if (orderId) {
                                this.cancelOrder(orderId)
                            }
                        }}
                        style={{
                        fontFamily: 'PingFangSC-Light',
                        fontSize: scaleFontSize(12),
                        color: '#3A62F0',
                        lineHeight: scaleSize(17)
                    }}>
                    {(state == 1 || state == 2)  ? '撤单' : ''}
                    </Text>
                </View>

                <View style={{
                    display: 'flex',
                    flexDirection: 'row'
                }}>

                    <View style={{
                        display: 'flex',
                        flexDirection: 'column',
                        flex: 1,
                        marginTop: scaleSize(9),
                    }}>
                        <Text style={{
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: scaleFontSize(12),
                            color: '#9B9B9B',
                            lineHeight: scaleSize(17)
                        }}>
                            类型
                        </Text>

                        <Text style={{
                            marginTop: scaleSize(3),
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: scaleFontSize(16),
                            color: textStyleColor,
                            lineHeight: scaleSize(22)
                        }}>
                            {typeText}
                        </Text>
                    </View>

                    <View style={{
                        display: 'flex',
                        flexDirection: 'column',
                        flex: 3,
                        marginTop: scaleSize(9),
                    }}>
                        <Text style={{
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: scaleFontSize(12),
                            color: '#C5C5C5',
                            textAlign: 'right'
                        }}>
                            价格({_coinType})
                        </Text>
                        <Text style={{
                            fontFamily: 'Helvetica',
                            fontSize: scaleFontSize(14),
                            color: '#888888',
                            textAlign: 'right',
                            lineHeight: scaleSize(17),
                            marginTop: scaleSize(8),
                        }}>{state == 4 ? '撤单' : price}</Text>
                    </View>

                    <View style={{
                        display: 'flex',
                        flexDirection: 'column',
                        flex: 3,
                        marginTop: scaleSize(9),
                    }}>
                        <Text style={{
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: scaleFontSize(12),
                            color: '#C5C5C5',
                            textAlign: 'right',
                        }}>成交数量({_coinType})</Text>
                        <Text style={{
                            fontFamily: 'Helvetica',
                            fontSize: scaleFontSize(14),
                            color: '#888888',
                            textAlign: 'right',
                            lineHeight: scaleSize(17),
                            marginTop: scaleSize(8),
                        }}>
                        {noFilled}/{amount}</Text>
                    </View>
                </View>
            </View>
        )
    }
}
